<template>
  <div class="haha">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="——没有更多电影了——"
      @load="onLoad"
    >
      <van-card
        @click="godetail(item.filmId)"
        class="zhu"
        v-for="item in list"
        :key="item.filmId"
      >
        <template #title>
          <div class="name">
            <span class="name">{{ item.name }}</span>
            <span class="ddd">{{ item.item.name }}</span>
          </div>
        </template>
        <template #desc class="ifo">
          <div class="ifo actors">
            主演：{{ item.actors | getActors(item) }}
          </div>
          <div class="ifo">
            上映日期：{{ item.premiereAt | getDate(item.premiereAt) }}
          </div>
        </template>
        <template #thumb>
          <img class="img" :src="item.poster" alt="" />
        </template>
        <template #tags>
          <van-tag
            plain
            type="danger"
            class="qian"
            size="medium"
            color="#ff5f16"
            >预购</van-tag
          >
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
// 把配置的路径导入
import api from '@/api/index.js'
import Vue from 'vue'
import { Card, Tag, List } from 'vant'

Vue.use(Card)
Vue.use(Tag)
Vue.use(List)
export default {
  data() {
    return {
      // 定义列表的数据
      list: [],
      loading: false,
      finished: false,
      pageNum: 1
    }
  },
  filters: {
    getDate(a) {
      var b = new Date(a * 1000)
      var month = b.getMonth() + 1
      var date = b.getDate()
      var days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      var dayOfWeek = days[b.getDay()]
      return dayOfWeek + '  ' + month + '月' + date + '日'
    },
    getActors(arr) {
      if (arr) {
        // arr存在如果有主演
        const brr = arr.map((item) => item.name)
        const str = brr.join(' ')
        return str
      } else {
        return '暂无主演'
      }
    }
  },
  methods: {
    onLoad() {
      // 获取数据的时候，直接this.$http就能得到数据
      this.$http.get(api.getFm + '?pageNum=' + this.pageNum).then((res) => {
        // 请求数据--能用get不用post
        // 如果请求状态的正确的
        if (res.status === 0 && res.msg === 'ok') {
          // 如果list的长度小于数据中的总数
          if (this.list.length < res.data.total) {
            // pageNum的数据往上加，并把请求回来的数据赋值给data中的数据
            this.pageNum++
            this.list.push(...res.data.films)
          } else {
            // 当list的长度和数据总数一样的时候，完成的状态打开
            this.finished = true
          }
          // 判断完成以后，加载的状态关闭
          this.loading = false
        }
      })
    },
    godetail(id) {
      this.$router.push({
        path: '/movie/detail',
        query: {
          id
        }
      })
    }
  },
  created() {
    this.$store.commit('xian')
  }
}
</script>

<style scoped lang='sass'>
.haha
  padding-bottom: 68px
  .zhu
    position: relative
    .van-card__thumb
      position: relative
      -webkit-box-flex: 0
      -webkit-flex: none
      flex: none
      margin-right: 8px
      width: 66px

    .ifo
      font-size: 13px
      margin-top: 4px
      color: #797d82
      overflow: hidden
      -o-text-overflow: ellipsis
      text-overflow: ellipsis
      white-space: nowrap
      .grade
        color: #ffb232
        font-size: 14px
    .actors
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      width: 180px

    .img
      width: 66px
    .name
      max-width: calc(100% - 25px)
      color: #191a1b
      font-size: 16px
      height: 22px
      line-height: 22px
      margin-right: 10px
      overflow: hidden
      width: 184px
      overflow: hidden
      -o-text-overflow: ellipsis
      text-overflow: ellipsis
      white-space: nowrap
    .ddd
      font-size: 9px
      color: #fff
      background-color: #d2d6dc
      height: 14px
      line-height: 14px
      padding: 0 2px
      border-radius: 2px
      position: relative
      bottom: 2px
      margin-left: 5px
    .qian
      line-height: 25px
      height: 25px
      width: 50px
      font-size: 13px
      text-align: center
      border-radius: 2px
      position: absolute
      right: 16px
      bottom: 45px
      justify-content: center
</style>
